<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp" %>
<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowdjscode/my-menu.js"></script>
<script type="text/javascript">

    $(function (){
        // 初始化树形结构
        generateTree();

        // 给添加按钮绑定单击响应函数
        $("#treeDemo").on("click",".addBtn",function (){

            // 获取当前id作为新增节点的父id
            window.pid = this.id;

            // 打开模态框
            $("#menuAddModal").modal("show");

            // 防止超链接跳转
            return false;
        });

        $("#menuSaveBtn").click(function(){

            // 获取模态框中的各个值
            var name = $.trim($("#menuAddModal [name=name]").val());
            var url = $.trim($("#menuAddModal [name=url]").val());
            var icon = $.trim($("#menuAddModal [name=icon]:checked").val());

            // 发送ajax请求
            $.ajax({
                url:"menu/save.json",
                type:"post",
                data:{
                    "pid":pid,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                dataType:"json",
                success:function (response){

                    if (response.result == "SUCCESS"){

                        layer.msg("操作成功");
                        // 重新加载树形结构
                        generateTree();
                    }
                    if (response.result == "FAILED"){
                        layer.msg("操作失败 "+response.message);
                    }

                },
                error:function (response){
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuAddModal").modal("hide");
            // 清空表单，调用重置按钮的click()函数，不传参，相当于用户点击了以下
            $("#menuResetBtn").click();
        });


        // 给编辑按钮绑定单击响应函数
        $("#treeDemo").on("click",".editBtn",function (){

            // 获取当前id保存到全局变量
            window.id = this.id;

            // 打开模态框
            $("#menuEditModal").modal("show");

            // 获取zTreeObj对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            // 根据id属性查找节点对象
            var key = "id";
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key,value);

            // 回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);
            $("#menuEditModal [name=icon]").val([currentNode.icon]);

            // 防止超链接跳转
            return false;
        });

        $("#menuEditBtn").click(function(){

            // 获取模态框中的各个值
            var name = $("#menuEditModal [name=name]").val();
            var url = $("#menuEditModal [name=url]").val();
            var icon = $("#menuEditModal [name=icon]:checked").val();

            // 发送ajax请求
            $.ajax({
                url:"menu/update.json",
                type:"post",
                data:{
                    "id":window.id,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                dataType:"json",
                success:function (response){

                    if (response.result == "SUCCESS"){

                        layer.msg("操作成功");
                        // 重新加载树形结构
                        generateTree();
                    }
                    if (response.result == "FAILED"){
                        layer.msg("操作失败 "+response.message);
                    }

                },
                error:function (response){
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuEditModal").modal("hide");

        });



        // 给删除按钮绑定单击响应函数
        $("#treeDemo").on("click",".removeBtn",function (){

            // 获取当前id保存到全局变量
            window.id = this.id;

            // 打开模态框
            $("#menuConfirmModal").modal("show");

            // 获取zTreeObj对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            // 根据id属性查找节点对象
            var key = "id";
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key,value);

            $("#removeNodeSpan").append(" 【"+currentNode.name+"】 ");

            // 防止超链接跳转
            return false;
        });

        $("#confirmBtn").click(function (){

            $.ajax({
                "url":"menu/remove.json",
                "type":"post",
                "data":{
                    "id":window.id
                },
                "dataType":"json",
                "success":function (response){

                    var result = response.result;

                    if(result == "SUCCESS") {

                        layer.msg("操作成功！");
                        // 重新加载树形结构，要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }
                    if(result == "FAILED") {

                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function(response){

                    layer.msg(response.status+" "+response.statusText);
                }
            })
            // 关闭模态框
            $("#menuConfirmModal").modal("hide");

        });
    });

</script>

<body>

<%@include file="/WEB-INF/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/modal-menu-add.jsp"%>
<%@include file="/WEB-INF/modal-menu-confirm.jsp"%>
<%@include file="/WEB-INF/modal-menu-edit.jsp"%>
</body>
</html>